<?php if (!defined('THINK_PATH')) exit();?>﻿<!DOCTYPE html>
<html lang="ZH-cn">
<head>
  <meta charset="UTF-8">
 <!--  <meta http-equiv="X-UA-Compateble" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1，maximum-scale=1,user-scalable=no"> 响应式 拒绝底部滑动条-->
  <title>回忆是一种幸福</title>
  <link href="/mydemo/Public/css/bootstrap.min.css" rel="stylesheet">
  <link href="/mydemo/Public/css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="/mydemo/Public/css/font-awesome.min.css">
  <link rel="stylesheet" href="/mydemo/Public/css/animate.min.css">
  <link rel="stylesheet" href="/mydemo/Public/css/overwrite.css">
  <style>
      *{font-family: "Microsoft Yahei";font-size: 14px;}
  body{width:auto; min-width: 1200px;height: 100%; background: #fff;}
  .head_wrap{height: 120px;background: #fff;width:1200px;margin:0 auto;}
  .head_logo{min-width:360px;height: 120px;}
  .head_logo img{width:220px;height: 100px;margin-left: 100px;margin-top: 10px;cursor:pointer;}
  .head_logo h1{color: #F97B06}
  .head_search{margin-top: 40px;}
  .head_search .btn{border-top:1px solid rgb(204,204,204);border-bottom:1px solid rgb(204,204,204);padding-top:6px;}
  .center_wrap{background: #DDD;width:1200px;margin:0 auto;height: 100%}
  .center_title{width:100%;background-color: #ccc;height:40px;line-height: 40px; border-bottom :1px solid #fff;}
  .center_title span:first-child{font-size: 20px;padding-left:12px;}
  .center_title a{padding-right:12px; color: #000}
  .center_title span {font-weight: bolder;}
  .title{width: 100%;float: left;position: relative;min-height: 1px;}
  .largeImg{text-align: center}
  .largeImg .largeImgContent{max-width:100% !important; cursor: pointer }/*max-height: 800px;可设高度限制*/
    .footer_wrap{width: 1200px;margin:0 auto}
  </style>
 <script src="/mydemo/Public/js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <div class="page-content">
    
<style>
.content{
  display: block;
  width:100%;
  margin-top: 15px;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
.content2{
  font-size: 20px;
  display: block;
  margin-top: 15px;
  width:100%;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

        <!-- 全局头部文件 -->
  <div class="top-nav">
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="<?php echo u('Index/index');?>">首页</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
     <!--  <?php echo ($Think['session']['users']['user_name']); ?> -->
      <?php if(Think.session.users.user_name == ''): ?><li ><a href="#" onclick="alert_developed('登陆')">登陆</a></li><?php endif; ?>  
         <li><a href="#"  onclick="alert_developed('我的相册')">我的相册</a></li>
         <li><a href="<?php echo u('User/user_list');?>" >用户列表</a></li>
         <li class="dropdown">
            <a href="<?php echo u('User/userlist');?>" class="dropdown-toggle"   data-toggle="dropdown">
               <?php echo ((isset($_SESSION['users']['user_name']) && ($_SESSION['users']['user_name'] !== ""))?($_SESSION['users']['user_name']):'用户中心'); ?>
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="<?php echo u('User/index');?>">个人中心</a></li>
               <li><a href="#">上传图片</a></li>
               <li><a href="/mydemo/index.php/Picture/wall">图片墙</a></li>
               <li class="divider"></li>
               <li><a href="#">我的好友</a></li>
               <li><a href="#">我的留言</a></li>
               <li class="divider"></li>
               <li><a href="<?php echo u('Login/logout');?>">退出登陆</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav> 
  </div> 


  



        
<!--图片内容  及具体样式自己去换  基本大块 都有背景色  怕你区分不开   你自己去换掉 或者不要 链接自己去换-->
<body>
  <div class="head_wrap row">
    <div class="head_logo col-sm-4">
      <!-- <img src="/mydemo/Public/img/lunbo_02.jpg" alt=""> -->
      <h1>回忆是一种幸福</h1>
    </div>
    <div class="head_search col-sm-8">
      <div class="search_content row">
        <div class="col-xs-12 col-sm-8">
          <div class="input-group">
            <input type="text"  class="form-control search-query" placeholder="">
            <span class="input-group-btn">
              <button type="button" class="btn btn-purple btn-sm">
                搜索
                <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="center_wrap row">
    <div class="title">
      <p class="center_title">
        <span><?php echo ($name); ?></span>
       
      </p>

    </div>
    <div class="col-sm-12">
      <div class="groupimg_content">
        <div class="row" >
          <!--原图容器-->

          <div class="col-sm-12 largeImg" style="display: none">
            <img class="largeImgContent" src="" alt="">
          </div>

          <!--缩略图 引用bootstrap缩略图   调整列数控制每行显示几张图片-->
          <div id="list">
          <?php if(is_array($list)): $i = 0; $__LIST__ = $list;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><div class="col-sm-6 col-md-3 imgContent">
              <a href="#" class="thumbnail ">
                <img src="/mydemo/Public/<?php echo ($vo["thumb_url"]); ?>" alt="..." onerror="this.src='/mydemo/Public/img/moren.jpg'">

                 <?php if($title == zutu): ?><div class="caption">
                      <h3><?php echo ($vo["zutu_name"]); ?></h3>
                      <p class="content"><?php echo ($vo["zutu_title"]); ?></p>
                    </div>
                <?php else: ?>
                     <span style="position:absolute;left:0;top:140px;width:100%;height:30%;background:rgba(0,0,0,.3);display:none;text-align:center;margin-top:0px;color:#fff;font-size:15px;">
                      <?php echo ($vo["title"]); ?>
                    </span><?php endif; ?>
              </a>
            </div><?php endforeach; endif; else: echo "" ;endif; ?>
          </div>
            <div class="col-sm-6 col-md-3 imgContent" id="insert_div" style="display:block;">
              <a href="#" class="thumbnail smallImg"  id="insert_img">
               <?php if(empty($nodata) == true): ?><img src="/mydemo/Public/img/insert.png" style="width:180px;height:180px;" tilte="点击添加" />
               <?php else: ?>
                  <img src="/mydemo/Public/img/onload.png" style="width:180px;height:180px;" tilte="没有数据" /><?php endif; ?>
              </a>
            </div>
        </div>
      </div>
    </div>

  </div>
</body>

          
  <script src="/mydemo/Public/js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">

    var url ="{u:('img_list')";
    var page_now = 2;
  $(function(){
    //鼠标放上去显示标题
    $(".thumbnail").bind('mousemove',function() {
      $(this).children('span').show();
    });
    $(".thumbnail").bind('mouseleave',function(event) {
      $(this).children('span').hide();
    });
//点击添加图片
    var title = "<?php echo ($title); ?>";
     $('#insert_img').bind('click',{"title":title},load_img);




//显示图片特效
/*    $(".smallImg").width() = "200px";
    $(".smallImg").height() = "267px";

    $(".smallImg").unbind("click").bind("click",function(){
      var src = $(this).find("img").attr("src");
      $(this).parent().siblings(".largeImg").find("img").attr("src",src);
      $(this).parent().siblings(".largeImg").css("display","block");

      $(this).parent().parent().find(".smallImg").hide();
      $()

    })

    $(".largeImgContent").unbind("click").bind("click",function(){
      $(this).parent(".largeImg").css("display","none");
      $(this).parent().parent().find(".smallImg").show();

    })*/

    // $("img").hover(function() {
    //   alert(123);
    // }, function() {
    //   alert(435);
    // });
/*    $(".newimg_content img").bind("mouseenter",function(e){
      debugger;

        $(this).parent().parent().find('.imgLayout').css({"display":"block","width":$(this).parent().width()+10,"height":$(this).parent().height()+10});
    })
    $(".newimg_content .imgLayout").bind('mouseleave', function(e) {
        $(this).css("display","none");
    });*/


    // $(".newimg_content img").bind("mouseleave",function(e){
    //   debugger;
    //   var loEL = document.elementFromPoint(e.clientX,e.clientY);
    //     var n = loEL.nodeName;
    //     var m = element.getAttribute("sty");
    //     if(m != "imgBook"){
    //       $(this).parent().parent().find('.imgLayout').css("display","none");       
    //     }
        
    // })
})
//点击添加图片加载更多
function load_img(d){
  //获取到是什么类型
  var title = d.data.title;
  var result = "";
  var len = "";
  //将添加的图片隐藏
  $(this).parent().hide();
  //请求数据
  $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    data: {'title': title,
           'page_now':page_now
          },
    complete: function(xhr, textStatus) {
      //called when complete
    },
    success: function(data) {
      if(data == 0){
        $('#insert_img').find('img').attr('src','/mydemo/Public/img/onload.png');
        $('#insert_img').unbind('click');
        $('#insert_div').show();
        //alert('没有内容啦');                 
      } 
                  
                
    $.each(data, function (n, value) {
             var result = '<div class="col-sm-6 col-md-3 imgContent"><a href="#" class="thumbnail smallImg"><img src="/mydemo/Public/'+value.thumb_url+'" alt="..." onerror="this.src=\'/mydemo/Public/img/moren.jpg\'"><span style="position:absolute;left:0;top:140px;width:100%;height:30%;background:rgba(0,0,0,.3);display:none;text-align:center;margin-top:0px;color:#fff;font-size:15px;">'+value.title+'</span><?php if($title == zutu): ?><div class="caption"><h3><?php echo ($vo["zutu_name"]); ?></h3><p><?php echo ($vo["zutu_title"]); ?></p></div><?php endif; ?></a></div>';
             $('#list').append(result);
             len ++;
           });
    $(".thumbnail").unbind("mousemove").bind('mousemove',function() {
      $(this).children('span').show();
    });
    $(".thumbnail").unbind("mouseleave").bind('mouseleave',function() {
      $(this).children('span').hide();
    });
    if(len < 3){
         $('#insert_img').find('img').attr('src','/mydemo/Public/img/onload.png');
        $('#insert_img').unbind('click');
        //$('#insert_div').show();
    }
      $('#insert_div').show(); 
      page_now ++;
    },
    error: function(xhr, textStatus, errorThrown) {
      //called when there is an error
    }
  });
  

}
</script>

        <div id="footer">
    <div class="footer1">
    <div class="title">
      <p class="center_title">
        <span>友情链接</span>
      </p>

    </div>
      <div style="clear: both;"></div>
      <div id="friend_link">
        <a target="_blank" href="http://www.chengzhier.com">橙汁儿电影网</a>
        <a target="_blank" href="http://zhixing.zxtms.net">知行工作室</a>
        <a target="_blank" href="http://www.huanyan520.com">焕言工作室</a>
        
        <a target="_blank" href="http://www.urionz.com">有时梦游博客</a>
      </div>
    </div>
    
    <div class="footer2">
      <div class="wrap">
        <p></p>
        <p>© 2016 <a href="http://www.chengzhier.com/" title="Sun"><strong>Sun</strong></a>. All rights reserved.</p>
        <p></p>
        
        <p> 技术支持 <strong style="color: #ff7d00;">Song、Zhou</strong></p>
        <p></p>
        <p>该网站的自图片都来自与<strong style="color: #ff7d00;">sunqiu</strong>收藏，记录身边的成长</p>
      </div>
    </div>
  </div>
 <script src="/mydemo/Public/js/bootstrap.min.js"></script>
  <script src="/mydemo/Public/js/parallax.min.js"></script>
  <script src="/mydemo/Public/js/wow.min.js"></script>
  <script src="/mydemo/Public/js/jquery.easing.min.js"></script>
  <script type="text/javascript" src="/mydemo/Public/js/fliplightbox.min.js"></script>
  <script src="/mydemo/Public/js/functions.js"></script>
  <script type="text/javascript" src="/mydemo/Public/layer/layer.js"></script>
  <script type="text/javascript">
    function alert_developed(data){
        alert(data+"待开发，敬请期待");
        return false;
      }
</script>


        

    </div>
</body>
</html>